<template>
  <div>
    <div class="title">产品评价（{{num}}）</div>
    <div class="c-body" v-for="(comment, key1) in comments" :key="key1">
    <div class="user">
      <img :src="comment.head_img">
      <div>{{comment.name}}</div>
    </div>
    <div>{{comment.content}}</div>
    <div class="pic">
      <img :src="pic" v-for="(pic, key2) in comment.img" :key="key2" @click="clickPic(pic)">
    </div>
  </div>
    <big-img :src="imgPic" :bigShow="bigShow" @clickBig="clickB"></big-img>
  </div>
</template>

<script type="text/ecmascript-6">
  import BigImg from '../../components/sale/big.vue';

  export default {
    components: {BigImg},
    name: 'comment',

    data () {
      return {
        num: 0,
        comments: [],
        imgPic: '',
        bigShow: false
      };
    },
    props: {},
    created () {
    },
    mounted() {
      this.num = this.$route.query.num;
      this.$Sale.allM({product: this.$route.query.goodId, status: 3}).then(res => {
        this.comments = res.data;
      }, () => {
      });
    },
    methods: {
      clickB() {
        this.bigShow = false;
      },
      clickPic(src) {
        this.bigShow = true;
        this.imgPic = src;
      }
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .title
    font-size vw(14)
    color #333
    padding vw(15)
    background-color #fff
  .c-body
    padding vw(10) vw(15)
    margin-top vw(10)
    font-size vw(12)
    color #333
    background-color #fff
    .user
      font-size vw(10)
      color #999
      display flex
      align-items center
      margin-bottom vw(15)
      margin-top vw(5)
      img
        width vw(20)
        height vw(20)
        border-radius 50%
        margin-right vw(5)
    .pic
      display flex
      flex-wrap wrap
      img
        width vw(60)
        height vw(60)
        margin-top vw(20)
        margin-left vw(10)
        object-fit cover
      img:first-child
        margin-left vw(0)
</style>
